<template>
	<view>
		<swiper class="swper" :indicator-dots="false" :autoplay="true" indicator-active-color="#fff" circular="true" :interval="1000"
			:duration="1000">
			<swiper-item>
				<image class="imgs" src="../../static/hong_slices/184537539_504012203.jpg" mode=""></image>
			</swiper-item>
		</swiper>
		
		<view class="introduce">
			<view class="storefront">
				<p class="storeSell1">武汉东湖高新烽火站洗车店</p>
				<p class="storeSell">龙门洗</p>
			</view>
			<view class="detailed">
				武汉XXXXXXXXXXXXXX
			</view>
			<view class="information">
				<view class="information1">
					空闲中
				</view>
				<view class="information2">
					1台机器
				</view>
				<view class="information3">
					11.2公里
				</view>
			</view>
			<view class="xian">
			</view>
			<view class="business">
				<view class="">
					24小时营业
				</view>
				<view class="">
					支持包月会员
				</view>
			</view>
			

		</view>
		<view class="xian2">
		
		</view>
		<view class="">
			<view class="">
				温馨提示
			</view>
			<p>
				每个站点洗车模式、价格等可能会不同，请事先了解站点信息，以免产生误会。部分站点停车
				会产生停车费，为了避免洗车排队等待过久产生停车费，可通过查看车站的繁忙情况合理安排
				洗车时间。
			</p>
		</view>
		
		<button style="background-color: aqua;" @click="navigate('car/xichezhifu')" >
			洗车
		</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods:{
			navigate: function(uri) {
				uni.navigateTo({
					url: `/pages/${uri}`
				})
			},
		}
	}
</script>

<style lang="less">
	.swper{
		height: 450rpx;
		.imgs{
			width: 100%;
			
		}
	}
	.introduce{
		background-color: white;
		position: relative;
		bottom: 40rpx;
		border-radius: 20px;
		padding: 30rpx;
		.storefront{
			display: flex;
			justify-content: space-between;
			padding-bottom: 30rpx;
			.storeSell1{
				font-size: 20px;
			}
			.storeSell{
				width: 55px;
				text-align: center;
				border: 1px solid #3C9CFF;
				border-radius: 6px;
				color: #3C9CFF;
			}
		}
		.detailed{
			font-size: 16px;
			font-weight: 200;
			padding-bottom: 20rpx;
		}
		.information{
			display: flex;
			padding-bottom: 60rpx;
			.information1{
				width: 55px;
				text-align: center;
				background-color: #3C9CFF;
				color: white;
				border-radius: 6px;
			}
			.information2{
				font-size: 16px;
				font-weight: 200;
				padding-left: 40rpx;
			}
			.information3{
				position: absolute;
				right: 30rpx;
			
			}
		}
		.xian{
			height: 4rpx;
			background-color: #EEEEEE;
		}
		.business{
			display: flex;
			justify-content: space-between;
			padding-top: 20rpx;
			font-size: 16px;
			font-weight: 100;
			
		}
		
		
	}
	.xian2{
		height: 20rpx;
		background-color: #EEEEEE;
	}
</style>
